<template>
  <div class="nav-container">
    <el-menu
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      
      <div class="site-title">
        <el-icon><DataLine /></el-icon>
        <span>赛事数据统计</span>
      </div>

    </el-menu>
    
    <div class="nav-bottom">
      <input
        type="file"
        ref="fileInput"
        accept=".csv"
        style="display: none"
        @change="handleFileChange"
      />
      <el-button
        type="primary"
        :icon="Upload"
        :loading="isLoading"
        @click="triggerFileInput">
        导入
      </el-button>
      <el-button
        type="success"
        :icon="Download"
        @click="handleExport">
        导出
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { DataLine, Upload, Download } from '@element-plus/icons-vue'
import { useDataStore } from '../store/dataStore'
import { ElMessage } from 'element-plus'

export default {
  name: 'NavigationMenu',
  components: {
    DataLine,
    Upload,
    Download
  },
  setup() {
    const fileInput = ref(null)
    const dataStore = useDataStore()
    const { isLoading } = dataStore

    const triggerFileInput = () => {
      fileInput.value.click()
    }

    const handleFileChange = async (event) => {
      const file = event.target.files[0]
      if (!file) return

      if (!file.name.endsWith('.csv')) {
        ElMessage.error('只支持导入CSV格式的文件')
        event.target.value = ''
        return
      }

      try {
        await dataStore.uploadFile(file)
        ElMessage.success('数据导入成功')
      } catch (error) {
        ElMessage({
          type: 'error',
          message: error.message || '数据导入失败',
          duration: 5000,
          showClose: true
        })
      }
      
      event.target.value = ''
    }

    const handleImport = () => {
      console.log('Import clicked')
    }

    const handleExport = () => {
      console.log('Export clicked')
    }

    return {
      fileInput,
      isLoading,
      triggerFileInput,
      handleFileChange,
      handleImport,
      handleExport
    }
  }
}
</script>

<style>
.nav-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.el-menu {
  width: 200px;
  flex: 1;
}

.site-title {
  height: 56px;
  line-height: 56px;
  padding: 0 20px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-title:hover {
  background-color: #434d5a;
}

.site-title .el-icon {
  font-size: 18px;
}

.nav-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: #4a5463;
  display: flex;
  gap: 8px;
  flex-direction: row;  /* Changed from column to row */
  justify-content: space-between;  /* Added to distribute space evenly */
}

.nav-bottom .el-button {
  flex: 1;  /* Makes both buttons take equal space */
}
</style>
